<script setup lang="ts">
	import { reactive, ref } from "vue";
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		onShow,
		onHide,
		onLoad,
		onReachBottom,
		onUnload
	} from '@dcloudio/uni-app'
	import {
		userStore
	} from '@/pinia';
	let router = useRouter()
	const userStoreInfo = userStore();
	const {
		proxy,
	} = getCurrentInstance()
	onUnload(() => {
		clearInterval(timeId)
	})
	let postId = ref()
	onLoad((option) => {
		postId.value = option.id
		getVipList()
	})
	let cardList = ref()
	const getVipList = () => {
		//查询所有卡
		proxy.$req('POST', proxy.$api.zhidingka, {
			topType: postId.value,
			userId: userStoreInfo.userInfo.id,
			userType: userStoreInfo.userFlag
		}).then((res) => {
			console.log(res);
			cardList.value = res.result
		})
	};
	//购买/轮询
	let timeId;
	const submitOrder = (id) => {
		clearInterval(timeId)
		proxy.$req('POST', proxy.$api.kaitongzhiding, {
			topType: postId.value,
			userId: userStoreInfo.userInfo.id,
			topCardId: id
		}).then((res) => {
			uni.$u.toast(res.message)
			if (res.success) {
				let url = JSON.parse(res.result).resp_data.counter_url
				// #ifdef APP-PLUS
				plus.runtime.openURL(url)
				console.log('app');
				// #endif 
				// #ifdef H5
				window.open(url)
				console.log('h5');
				// #endif
				timeId = setInterval((() => {
					chadingdan(JSON.parse(res.result).resp_data.out_order_no, JSON.parse(res.result).resp_data.pay_order_no)
				}), 2000)
			}
		})
	}
	const chadingdan = (tradeNo, payId) => {
		proxy.$req('POST', proxy.$api.chadingdan, {
			tradeNo,
			payId,
		}).then((res) => {
			let data1 = JSON.parse(res.result).resp_data
			console.log(data1);
			if (data1.order_status == 2) {
				uni.$u.toast('支付成功')
				getVipList()
				clearInterval(timeId)
			} else if (data1.order_status == 3 || data1.order_status == 5) {
				uni.$u.toast('支付失败')
				clearInterval(timeId)
			} else {

			}
		})
	}
</script>

<template>
	<view class="headBackground">
		<u-navbar class="navbar" bgColor="rgba(255, 255, 255, 0)" :placeholder="true" title="" :autoBack="true">
			<template #center>
				<view style="font-weight: 600;">
					{{ postId==2?'招商置顶':'' }}
					{{ postId==3?'服务置顶':'' }}
					{{ postId==4?'营销置顶':'' }}
				</view>
			</template>
		</u-navbar>
	</view>
	<swiper class="swiper" circular :indicator-dots="true" :autoplay="false">
		<swiper-item v-for="(item,index) in cardList" :key="index">
			<view class="card">
				<view class="cardH">
					{{ item.vipName }}
				</view>
				<view class="cardC">
					{{ item.card?item.card.endtime:'' }}
				</view>
				<view class="cardF">
					<view class="cardFL">
						{{ item.info }}
					</view>
					<view class="cardFR" @click="submitOrder(item.id)" v-if="item.card">立即续费</view>
					<view class="cardFR" @click="submitOrder(item.id)" v-else>立即开通</view>
				</view>
			</view>
		</swiper-item>
	</swiper>
	<view class="Equity">
		<view class="EquityH">
			<view class="text1">
				我的权益
			</view>
			<view class="text2">
				已使用1天
			</view>
		</view>
		<view class="EquityF">
			<view class="modal">
				<text class="num">1天</text>
				<view class="text">置顶天数</view>
			</view>
			<view class="modal">
				<text class="num">26</text>
				<view class="text">浏览量</view>
			</view>
			<view class="modal">
				<text class="num">6</text>
				<view class="text">购买量</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.swiper {
		width: 686rpx;
		height: 300rpx;
		margin: -450rpx auto 0;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.Equity {
		width: 686rpx;
		height: 276rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		margin: 30rpx auto;
		padding: 30rpx;
		box-sizing: border-box;

		.EquityH {
			display: flex;
			justify-content: space-between;

			.text1 {
				font-size: 32rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.85);
			}

			.text2 {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.45);
			}
		}

		.EquityF {
			display: flex;
			justify-content: space-around;
			margin-top: 60rpx;

			.modal {
				width: 180rpx;
				text-align: center;

				.num {
					height: 48rpx;
					font-size: 40rpx;
					font-weight: bold;
					color: #000000;

				}

				.text {
					margin-top: 10rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.65);
				}
			}
		}
	}

	.headBackground {
		width: 750rpx;
		height: 572rpx;
		background-image: url(@/static/images/mineBg.png);
		background-size: cover;

	}

	.card {
		width: 686rpx;
		height: 254rpx;
		background-image: url(@/static/images/vipback1.png);
		background-size: cover;
		padding: 30rpx 40rpx;
		box-sizing: border-box;

		.cardH {
			font-size: 36rpx;
			font-weight: 500;
			color: #FFE9C9;
		}

		.cardC {
			font-size: 28rpx;
			font-weight: 400;
			color: #FFE9C9;
			margin: 10rpx 0 30rpx 0;
		}

		.cardF {
			display: flex;
			justify-content: space-between;

			.cardFL {
				line-height: 64rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #FFE9C9;
			}

			.cardFR {
				width: 176rpx;
				height: 64rpx;
				background: url(@/static/images/vipButton.png);
				background-size: 100%;
				text-align: center;
				line-height: 64rpx;
				font-size: 28rpx;
				font-weight: 600;
				color: #000000;
			}
		}

	}
</style>